iT邦幫忙

2021 iThome 鐵人賽

DAY 23
1
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 23

Day_23: 讓 Vite 來開啟你的Vue 之 <script setup>

  • 分享至 

  • xImage
  •  

Hi Dai Gei Ho~ 我是 Winnie ~ 在今天文章中,我們要來說說 Composition API 中的 <script setup>

什麼是 script setup ?

script setup 是 Vue3 中所提供的 語法糖,使用方式非常簡單,只要在 script 標籤加上 setup 就可以了,作用如 setup()一樣,所有的變數、函式 都可以直接給模板(template)使用,不需要再return
如下方範例:

 <template>
 <div>{{name}}</div>
 </template>
 <script setup>    
     import { ref } from "vue"
     const name = ref('winnie')
 </script>

是不是很簡單,而更方便的是在 script setup中會自動註冊引入的元件,也就是說,它會以檔名為主作為元件,這樣就不用再寫name屬性來定義了。

範例如下:

    <template>
        <HelloWorld />
    </template>

    <script setup>
    import  HelloWorld from './HelloWorld.vue'
    </script>

其中一般的<script>只會在第一次導入時被執行,而<script setup>會在每一個元件實體被創建實執行。

另外小提醒:

在模板(template)引入元件時,無論是 kebab-case 還是 PascalCase命名方式都是可以使用的,但在官方文件主要還是建議 以PascalCase的方式來保持一致性,因為這樣可以更好區分自定義元件。

defineProps 和 defineEmits

definePropsdefineEmits 主要 是用來 在<script setup>定義 props 與emits,而其中這兩個接受的值與我們過去定義props 與 emits 的值相同。

用法如下:

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

useSlots 和 useAttrs

針對 $slots$attrs ,官方文件有提到 通常 會直接通過 模板來使用它,不過當你需要在<script setup>中使用 它們時,可以引入 useSlotsuseAttrs來讀取。

用法如下:

    <script setup>
    
        import { useSlots, useAttrs } from 'vue'
        const slots = useSlots()
        const attrs = useAttrs()
        
    </script>

與一般 script 一起使用

另外當我們需要使用一個一般<script>時,可以在元件中同時聲明<script><script setup>,但注意在元件中只能各聲明一個

用法如下:

    <script>
        export default({
          name: "ComponetA"
        })
    </script>
    
    <script setup>
        const name =ref('winnie')
    </script>

以上就是關於 Vue3 script setup語法糖常見使用方法介紹,一樣還是那句話,如果大家對script setup使用方法有更多興趣,歡迎到官方文件去細細品嚐喔,如果有任何問題歡迎大家多多指教,謝謝大家。

ps. 雖然語法糖很好用,但偷偷說 我個人還是比較喜歡寫原本的語法,因為對我來說 程式碼易讀性比較高。

這也讓我想到之前上課的時候,五倍紅寶石的龍哥 說過的一句話:雖然是慣例,但你也可以選擇不要跟著慣例走,偶爾照自己想法做,搞不好還做得更好。(超有個性超喜歡,自己還偷偷筆記了XD)

所以這句話也送給大家,希望大家還是可以找到適合自己習性來選擇來使用。


上一篇
Day_22: 讓 Vite 來開啟你的Vue 之 跨元件響應式資料的處理
下一篇
Day_24: 讓 Vite 來開啟你的Vue 之 VueUse
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言